<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #code {
            display: inline-block;
            width: 60px;
            line-height: 30px;
            text-align: center;
            background-color: #eee;
            letter-spacing: 2px;
            font-style: italic;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div class="form">
        <h2>表单验证</h2>
        <p>
            <label for="">请输入用户名</label>
            <input id="username" type="text" placeholder="用户名">
            <!-- <span>用户名是由数字，字母组成，且数字不能开头，长度必须是4-8位</span> -->
            <span id="userSpan">用户名错误</span>
        </p>
        <p>
            <label for="">请输入密码</label>
            <input id="password" type="password" placeholder="密码">
            <!-- <span>密码是由数字，字母组成长度必须是6-12位</span> -->
            <span id="pwdSpan">密码错误</span>
        </p>

        <p>
            <label for="">请输入手机号</label>
            <input type="text" placeholder="手机号">
            <!-- <span>手机号是11位</span> -->
            <span id="pwdSpan">手机号错误错误</span>
        </p>

        <p>
            <label for="">请输入验证码</label>
            <input id="codeInp" type="text">
            <span id="code">1234</span>
            <span id="codeSpan">验证码错误</span>
        </p>

        <button id="btn" disabled>提交</button>

    </div>

    <script>

        // 表单验证
        //    1 正则做分步验证 
        //    2 每一个都要验证通过按钮才可以点击
        //        思路   立flag
        //        注意：输入的内容会被反复的修改



        // 获取元素
        // function get(ele){
        //     return document.querySelector(ele);
        // }
        const get = ele => document.querySelector(ele);

        // 判断是否验证通过
        let userFlag = pwdFlag = phoneFlag = codeFlag = false;

        // 获取用户名
        const oUser = get('#username');
        const oUserSpan = get('#userSpan');

        // 获取密码
        const oPwd = get('#password');
        const oPwdSpan = get('#pwdSpan');

        // 获取按钮 
        const oBtn = get('button');


        const check = () => {
            // 按钮的处理
            // if(pwdFlag && userFlag) {
            //     oBtn.disabled = false ;
            // } else {
            //     oBtn.disabled = true ;
            // }
            oBtn.disabled = !(pwdFlag && userFlag);
        }

        // div没有blur事件  --- 无法使用事件委托

        oUser.addEventListener('blur', function () {
            // 重新再输入的时候  flag -> false   ------------------------------------
            userFlag = false;
            // 获取用户名
            const userVal = this.value.trim();
            // 空
            if (/^.{0}$/.test(userVal)) {
                oUserSpan.innerHTML = '空';
                oUserSpan.style.color = 'red';

            }
            // 长度
            else if (!/^.{4,8}$/.test(userVal)) {
                oUserSpan.innerHTML = '长度4-8';
                oUserSpan.style.color = 'red';

            }
            // 数字开头
            else if (/^\d/.test(userVal)) {
                oUserSpan.innerHTML = '数字不能开头';
                oUserSpan.style.color = 'red';

            }
            // 非法
            else if (/\W/.test(userVal)) {
                oUserSpan.innerHTML = '不能出现数字字母下划线以外的字符';
                oUserSpan.style.color = 'red';
            }
            else {
                oUserSpan.innerHTML = '√';
                oUserSpan.style.color = 'green';
                userFlag = true;
            }

            check();

        })

        oPwd.addEventListener('blur', function () {
            pwdFlag = false;
            // 获取密码
            const userVal = this.value.trim();
            // 空
            if (/^.{0}$/.test(userVal)) {
                oPwdSpan.innerHTML = '空';
                oPwdSpan.style.color = 'red';

            }
            // 长度
            else if (!/^.{4,8}$/.test(userVal)) {
                oPwdSpan.innerHTML = '长度4-8';
                oPwdSpan.style.color = 'red';

            }
            // 非法
            else if (/\W/.test(userVal)) {
                oPwdSpan.innerHTML = '不能出现数字字母下划线以外的字符';
                oPwdSpan.style.color = 'red';

            }
            else {
                // 强弱验证
                let numFlag = smallFlag = bigFlag = 0;
                if (/\d/.test(userVal)) numFlag = 1;
                if (/[a-z]/.test(userVal)) smallFlag = 1;
                if (/[A-Z]/.test(userVal)) bigFlag = 1;
                let flag = numFlag + smallFlag + bigFlag;
                if (flag === 1) {
                    oPwdSpan.innerHTML = '弱';
                    oPwdSpan.style.color = 'red';
                }
                else if (flag === 2) {
                    oPwdSpan.innerHTML = '中';
                    oPwdSpan.style.color = 'yellow';
                }
                else if (flag === 3) {
                    oPwdSpan.innerHTML = '强';
                    oPwdSpan.style.color = 'green';
                }

                pwdFlag = true;
            }


            check();

        })





      




    </script>

</body>

</html>